<template>
	<view class="basic-info-container" @tap="closeEllipsisTip">
		<scroll-view
			scroll-y
			class="scroll-view"
			scroll-with-animation
			refresher-enabled
			:refresher-triggered="isPullRefresh"
			@refresherrefresh="refreshList"
			enable-flex
			@scroll="close"
		>
			<view class="top-info-container" v-if="modelType == 'model1'">
				<view class="person-info">
					<view class="icon-container" v-if="detailInfo.avatar && !loading">
						<!-- 	<preview-image previewClass="test-avatar" :avatar="detailInfo.avatar" class="avatar-container"></preview-image> -->
						<image :src="detailInfo.avatarData" class="test-avatar" @tap="previewImage(detailInfo.avatarData)"></image>
						<view class="black-icon" @tap.stop.prevent="showBlackReason" :data-item="detailInfo" v-if="detailInfo.isBlack">
							<commonIcon type="icon-heimingdan" :size="32" />
						</view>
					</view>
					<view :class="'icon-container ' + (detailInfo.personType?.code != '10' ? 'orange' : 'green')" v-else-if="!detailInfo.avatar && !loading">
						<commonIcon type="icon-a-laowurenyuan1x" :size="82" v-if="detailInfo.personType?.code != '10'" />
						<commonIcon type="icon-a-guanlirenyuan1x" :size="82" v-else />
						<view class="black-icon" @tap.stop.prevent="showBlackReason" :data-item="detailInfo" v-if="detailInfo.isBlack">
							<commonIcon type="icon-heimingdan" :size="32" />
						</view>
					</view>
					<view class="icon-container" v-else></view>
					<view class="info-detail-container">
						<view class="info-detail-top">
							<text class="person-name">{{ detailInfo.rosterName }}</text>
							<text class="work-type" v-if="detailInfo.personType?.code != '20'">{{ detailInfo.personType?.value }}</text>
							<text class="work-type" v-else>{{ detailInfo.worktype?.name }}</text>
						</view>
						<view class="info-detail-bottom">{{ detailInfo.workTeamName }}</view>
					</view>
				</view>
				<view class="attendance-info-container">
					<view class="attendance-item">
						<view class="item-num">{{ detailInfo.attendanceMap ? detailInfo.attendanceMap.totalDays : '' }}</view>
						<view class="item-label">入职(天)</view>
					</view>
					<view class="attendance-item">
						<view class="item-num">{{ detailInfo.attendanceMap ? detailInfo.attendanceMap.attendanceDays : '' }}</view>
						<view class="item-label">出勤(天)</view>
					</view>
					<view class="attendance-item">
						<view class="item-num">{{ detailInfo.attendanceMap ? detailInfo.attendanceMap.todayWorkTime : '' }}</view>
						<view class="item-label">当天(h)</view>
					</view>
				</view>
				<view class="last-attendance-info" @tap="toAttendanceRecord">
					<view class="last-attendance-label">最新考勤</view>
					<view class="last-attendance-content">
						<text class="content-main">{{ detailInfo.lastestAttendanceRecordData }}</text>
						<text class="right-arrow"></text>
					</view>
				</view>
			</view>
			<view class="reject-reason" v-if="detailInfo.approvalComments && detailInfo.approvalType == '2'">驳回原因：{{ detailInfo.approvalComments }}</view>
			<view class="title">
				<commonIcon class="title-icon" type="icon-zhengjianxinxi" :size="36" />
				<text class="title-content">证件信息</text>
			</view>
			<view class="info-list">
				<view class="info-item" v-if="modelType == 'model2'">
					<view class="info-label">姓名</view>
					<view class="info-content">{{ detailInfo.rosterName || detailInfo.name }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">性别</view>
					<view class="info-content">{{ detailInfo.sexData }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">民族</view>
					<view class="info-content">{{ detailInfo.nation }}</view>
				</view>
				<view class="info-item" v-if="modelType == 'model1'">
					<view class="info-label">证件号</view>
					<view class="info-content">{{ detailInfo.identityNumberData }}</view>
				</view>
				<view class="info-item" v-else>
					<view class="info-label">证件号</view>
					<view class="info-content">{{ detailInfo.identityNumber }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">发证机关</view>
					<view class="info-content ellipsis-tip" @tap="openTips" :data-index="0" :data-content="detailInfo.identityOrg">{{ handleDetailInfo.identityOrgData }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">出生日期</view>
					<view class="info-content">{{ detailInfo.birthdayData }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">详细地址</view>
					<view class="info-content ellipsis-tip" @tap="openTips" :data-index="1" :data-content="detailInfo.address">{{ handleDetailInfo.addressData }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">有效期</view>
					<view class="info-content">{{ detailInfo.issuedAtData }}-{{ detailInfo.expiredAtData }}</view>
				</view>
				<view class="vertical-item" v-if="modelType == 'model2'">
					<view class="vertical-label">身份证正反面</view>
					<view class="vertical-content">
						<view class="pic-list">
							<preview-image
								class="pic-container"
								:avatar="detailInfo.identityFrontPhotoData"
								:imageList="[detailInfo.identityFrontPhotoData, detailInfo.identityBackPhotoData]"
								previewClass="pic"
							></preview-image>
							<preview-image
								class="pic-container"
								:avatar="detailInfo.identityBackPhotoData"
								:imageList="[detailInfo.identityFrontPhotoData, detailInfo.identityBackPhotoData]"
								previewClass="pic"
							></preview-image>
						</view>
					</view>
				</view>
			</view>
			<view class="title">
				<commonIcon class="title-icon" type="icon-gerenxinxi1" :size="36" />
				<text class="title-content">个人信息</text>
			</view>
			<view class="info-list">
				<view class="vertical-item" v-if="modelType == 'model2'">
					<view class="vertical-label">人脸近照</view>
					<view class="vertical-content">
						<view class="pic-list">
							<preview-image class="pic-container" :avatar="detailInfo.avatarData" previewClass="pic"></preview-image>
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">人员性质</view>
					<view class="info-content">{{ detailInfo.personType ? detailInfo.personType.value : '' }}</view>
				</view>
				<view class="info-item" v-if="modelType == 'model1' && detailInfo.personType?.code != '10'">
					<view class="info-label">工种</view>
					<view class="info-content">{{ detailInfo.worktype ? detailInfo.worktype.name : '' }}</view>
				</view>
				<view class="info-item" v-if="modelType == 'model1' && detailInfo.personType?.code == '10'">
					<view class="info-label">职位</view>
					<view class="info-content">{{ detailInfo.station ? detailInfo.station.name : '' }}</view>
				</view>
				<view class="info-item" v-if="modelType == 'model2'">
					<view class="info-label">{{ detailInfo.personType?.code == '10' ? '职位' : '工种' }}</view>
					<view class="info-content">{{ detailInfo.workTypeName || '' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">组织机构</view>
					<view class="info-content ellipsis-tip" @tap="openTips" :data-index="2" :data-content="detailInfo.workTeamName">
						{{ handleDetailInfo.workTeamNameData }}
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">联系电话</view>
					<view class="info-content">{{ detailInfo.phoneData }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">籍贯</view>
					<view class="info-content ellipsis-tip" @tap="openTips" :data-index="3" :data-content="detailInfo.nativePlace">{{ handleDetailInfo.nativePlaceData }}</view>
				</view>
				<view class="info-item" v-if="modelType == 'model1'">
					<view class="info-label">状态</view>
					<view class="info-content">{{ detailInfo.workingStatusData }}</view>
				</view>
				<view class="info-item" v-if="detailInfo.workingStatus == 1 && modelType == 'model1'">
					<view class="info-label">在岗日期</view>
					<view class="info-content">{{ detailInfo.startDateData }}</view>
				</view>
				<view class="info-item" v-if="detailInfo.workingStatus == 2 && modelType == 'model1'">
					<view class="info-label">离岗日期</view>
					<view class="info-content">{{ detailInfo.leaveDateData }}</view>
				</view>
			</view>
			<view class="title">
				<commonIcon class="title-icon" type="icon-yonggongxieyi" :size="36" />
				<text class="title-content">用工协议</text>
			</view>
			<view class="info-list">
				<view class="info-item" @tap="previewFile" :data-url="detailInfo.entryAgreement" data-name="进场承诺书(进场协议)">
					<view class="info-label">进场承诺书(进场协议)</view>
					<view v-if="!detailInfo.entryAgreement" class="info-content">无</view>
					<view class="right-arrow" v-else></view>
				</view>
				<view class="info-item" @tap="previewFile" :data-url="detailInfo.departureAgreement" data-name="出场承诺书(出场协议)">
					<view class="info-label">出场承诺书(出场协议)</view>
					<view v-if="!detailInfo.departureAgreement" class="info-content">无</view>
					<view class="right-arrow" v-else></view>
				</view>
				<view class="info-item" @tap="previewFile" :data-url="detailInfo.contractAttachment" data-name="合同附件">
					<view class="info-label">合同附件</view>
					<view v-if="!detailInfo.contractAttachment" class="info-content">无</view>
					<view class="right-arrow" v-else></view>
				</view>
			</view>
			<view class="title">
				<commonIcon class="title-icon" type="icon-fujiaxinxi" :size="36" />
				<text class="title-content">附加信息</text>
			</view>
			<view class="info-list">
				<view class="info-item">
					<view class="info-label">政治面貌</view>
					<view class="info-content">{{ detailInfo.politicalStatus ? detailInfo.politicalStatus.value : '' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">文化程度</view>
					<view class="info-content">{{ detailInfo.education ? detailInfo.education.value : '' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">婚姻状况</view>
					<view class="info-content">{{ detailInfo.marriageStatus ? detailInfo.marriageStatus.value : '' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">是否有重大病史</view>
					<view class="info-content">{{ detailInfo.hasMajorDisease ? '是' : '否' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">保险状态</view>
					<view class="info-content">{{ detailInfo.insureStatus ? detailInfo.insureStatus.value : '' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">紧急联系人</view>
					<view class="info-content">{{ detailInfo.linkMan || '' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">紧急联系人电话</view>
					<view class="info-content">{{ detailInfo.linkManPhone || '' }}</view>
				</view>
				<view class="info-item">
					<view class="info-label">开户行</view>
					<view class="info-content ellipsis-tip" @tap="openTips" :data-index="4" :data-content="detailInfo.accountBankName">
						{{ handleDetailInfo.accountBankNameData }}
					</view>
				</view>
				<view class="info-item">
					<view class="info-label">银行卡号</view>
					<view class="info-content ellipsis-tip" @tap="openTips" :data-index="5" :data-content="detailInfo.accountBankNumber">
						{{ handleDetailInfo.accountBankNumberData }}
					</view>
				</view>
			</view>
			<view class="title">
				<commonIcon class="title-icon" type="icon-zhengshu" :size="36" />
				<text class="title-content">证书信息</text>
			</view>
			<view class="certificate-list" v-if="detailInfo.certificateList && detailInfo.certificateList.length != 0">
				<view class="certificate-item" v-for="(item, index) in detailInfo.certificateList" :key="index">
					<view class="certificate-title">{{ item.indexData }}</view>

					<view class="certificate-content" @tap="toCertificateDetail" :data-item="item">
						<view class="certificate-name">{{ item.name }}</view>
						<view class="right-arrow"></view>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				<no-data firstContent="暂未添加证书"></no-data>
			</view>
			<view class="block" v-if="modelType == 'model1' && detailInfo.isCurProject && detailInfo.isCurrentProject && detailInfo.editBtnAuth"></view>
		</scroll-view>
		<view class="common-btns-container" v-if="modelType == 'model1' && detailInfo.isCurrentProject && detailInfo.isCurProject && detailInfo.editBtnAuth">
			<view class="common-btn-container" hover-class="common-btn" @tap="toEditRoster">编辑</view>
		</view>
		<view class="common-btns-container" v-if="modelType == 'model2' && detailInfo.approvalType == 1 && detailInfo.approvalBtnAuth">
			<view class="common-btn-container red" hover-class="common-btn" @tap="reject">不通过</view>
			<view class="common-btn-container" hover-class="common-btn" @tap="pass" :data-status="3">同意录入</view>
		</view>
		<view class="common-btns-container" v-if="modelType == 'model1' && !detailInfo.isCurrentProject && detailInfo.isManager">
			<view class="common-btn-container" hover-class="common-btn" @tap="toAddRoster">邀请加入项目</view>
		</view>
		<view class="common-btns-container" v-if="modelType == 'model2' && detailInfo.isNeedEdit">
			<view class="common-btn-container" hover-class="common-btn" @tap="continueEdit">继续编辑</view>
		</view>

		<commonDialog :show="showDialog" title="黑名单提示" :cancelBtn="false" :confirmBtn="false" :closeBtn="true" @close="closeDialog">
			<view class="tip-content">
				<view class="tip-item">
					<text class="tip-item-label">姓名：</text>
					<text class="tip-item-content">{{ blacklist.name }}</text>
				</view>
				<view class="tip-item">
					<text class="tip-item-label">拉黑时间：</text>
					<text class="tip-item-content">{{ blacklist.recordDate }}</text>
				</view>
				<view class="tip-item">
					<text class="tip-item-label">拉黑原因：</text>
					<text class="tip-item-content">{{ blacklist.reason }}</text>
				</view>
			</view>
		</commonDialog>

		<commonDialog :show="showRejectDialog" title="驳回理由" :closeBtn="true" @close="closeRejectDialog" :closeOnClickOverlay="false" @confirm="confirmReject">
			<view class="tip-content">
				<view class="tip-item">
					<textarea
						v-model="approvalComments"
						placeholder="请输入驳回理由"
						:auto-focus="showRejectDialog"
						:focus="showRejectDialog"
						adjust-keyboard-to="bottom"
						:maxlength="50"
						class="textarea"
					></textarea>
				</view>
			</view>
		</commonDialog>
	</view>
</template>

<script>
import commonIcon from '@/pagesA/components/common/icon/icon';
import previewImage from '@/pagesA/components/common/preview-image/preview-image';
import commonDialog from '@/pagesA/components/common/dialog/dialog';
import noData from '@/pagesA/components/common/no-data/no-data';
import { OBSdownloadPdf } from '@/pagesA/utils/downFile';
// import defaultAvatarImg from '@/pagesA/assets/image/default-avatar.png';
import { common } from '@/pagesA/utils/common.js';
import moment from 'moment';
const app = getApp();
export default {
	components: {
		commonIcon,
		previewImage,
		commonDialog,
		noData
	},
	data() {
		return {
			defaultAvatarImg: common.imgs.defaultAvatarImg,
			loading: true,
			handleDetailInfo: {
				identityOrgData: '',
				addressData: '',
				workTeamNameData: '',
				nativePlaceData: '',
				accountBankNameData: '',
				accountBankNumberData: ''
			},
			limit: 14,
			blacklist: {
				name: '',
				recordDate: '',
				reason: ''
			},
			showDialog: false,
			isPullRefresh: false,
			showRejectDialog: false,
			approvalComments: ''
		};
	},
	props: {
		detailInfo: {
			type: Object,
			default: () => ({})
		},
		//model1:花名册-人员详情；model2:人员审批-审批详情;
		modelType: {
			type: String,
			default: 'model1'
		}
	},
	methods: {
		previewImage(avatar) {
			let urls = [avatar];
			if (avatar.indexOf('http') < 0 && avatar.indexOf('https') < 0) {
				return;
			}
			uni.previewImage({
				current: avatar,
				urls,
				complete: () => {
					app.globalData.isPreview = true;
				}
			});
		},
		refreshList() {
			this.isPullRefresh = true;
			this.$emit('refreshlist');
		},
		showBlackReason(e) {
			const item = e.currentTarget.dataset.item;
			this.openDialog(item);
		},
		openDialog(item) {
			this.blacklist = {
				name: item.rosterName,
				recordDate: item.blacklist?.recordDate ? moment(item.blacklist.recordDate).format('YYYY-MM-DD') : '',
				reason: item.blacklist?.reason || ''
			};
			// this.setData({
			// 	blacklist: this.blacklist,
			// 	showDialog: true
			// });
			this.showDialog = true;
		},
		closeDialog() {
			// this.setData({
			// 	showDialog: false
			// });
			this.showDialog = false;
		},
		handleContent(value) {
			if (value && value.length > this.limit) {
				value = value.substr(0, this.limit) + '...';
			}
			return value;
		},
		toAttendanceRecord() {
			let lastestAttendanceRecord = this.detailInfo?.lastestAttendanceRecordData || '';
			uni.navigateTo({
				url: `/pagesA/pages/roster/attendanceRecord/attendanceRecord?recordTime=${lastestAttendanceRecord}&rosterUuid=${this.detailInfo.uuid}&projectUuid=${this.detailInfo.projectUuid}`
			});
		},
		toCertificateDetail(e) {
			const item = e.currentTarget.dataset.item;
			app.globalData.hasCertificateDetail = true;
			app.globalData.certificateDetail = item;
			uni.navigateTo({
				url: '/pagesA/pages/roster/certificate/certificateDetail/certificateDetail'
			});
		},
		previewFile(e) {
			const fileUrl = e.currentTarget.dataset.url;
			const name = e.currentTarget.dataset.name;
			if (!fileUrl) {
				return;
			}
			uni.showLoading({
				title: '预览中',
				mask: true
			});
			OBSdownloadPdf(name, fileUrl, () => {
				uni.hideLoading();
			});
		},
		reject() {
			// this.setData({
			// 	approvalComments: '',
			// 	showRejectDialog: true
			// });
			this.approvalComments = '';
			this.showRejectDialog = true;
		},
		closeRejectDialog() {
			// this.setData({
			// 	showRejectDialog: false
			// });
			this.showRejectDialog = false;
		},
		confirmReject() {
			if (!this.approvalComments) {
				common.message.toast('请填写驳回理由');
				return;
			}
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.examine({
				uuid: this.detailInfo.uuid,
				status: 2,
				type: this.detailInfo.type,
				approvalComments: this.approvalComments
			});
		},
		pass(e) {
			const status = e.currentTarget.dataset.status;
			uni.showModal({
				title: '温馨提示',
				content: '人员审批同意录入？',
				complete: (res) => {
					if (res.confirm) {
						this.examine({
							uuid: this.detailInfo.uuid,
							status,
							type: this.detailInfo.type
						});
					}
				}
			});
		},
		examine(params) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			common.apis.roster.examine(params).then(() => {
				common.message.toast('操作成功');
				app.globalData.hasApproval = true;
				this.closeRejectDialog();
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			});
		},
		openTips(e) {
			const index = e.currentTarget.dataset.index;
			const content = e.currentTarget.dataset.content;
			if (content && content.length <= this.limit) {
				return;
			}
			uni.createSelectorQuery()
				.in(this)
				.selectAll('.ellipsis-tip')
				.boundingClientRect((rects) => {
					let top = rects[index].top;
					this.$emit('opentips', {
						detail: {
							content,
							top
						}
					});
				})
				.exec();
		},
		close() {
			this.$emit('close');
		},
		toEditRoster() {
			app.globalData.hasEditRoster = true;
			app.globalData.editRosterInfo = JSON.parse(JSON.stringify(this.detailInfo));
			let isScanCode = this.detailInfo.isScanCode || '';
			uni.navigateTo({
				url: '/pagesA/pages/roster/editRoster/editRoster?isScanCode=' + isScanCode
			});
		},
		continueEdit() {
			//审批驳回后继续编辑
			app.globalData.hasEditRoster = true;
			app.globalData.editRosterInfo = JSON.parse(JSON.stringify(this.detailInfo));
			uni.navigateTo({
				url: '/pagesA/pages/roster/editRoster/editRoster?isContinueEdit=true'
			});
		},
		toAddRoster() {
			let detailInfo = JSON.parse(JSON.stringify(this.detailInfo));
			//检查企业配置项
			common.apis.roster
				.checkWarningConfig({
					projectUuid: detailInfo.projectUuid,
					rosterUuid: detailInfo.uuid
				})
				.then(() => {
					//非本项目管理人员扫工友码的编辑页面和扫项目码加入项目页面类似，沿用项目码新增人员的页面
					app.globalData.hasDetailInfo = true;
					app.globalData.detailInfo = detailInfo;
					uni.navigateTo({
						url: '/pagesA/pages/projectInfo/addRoster/addRoster?projectUuid=' + this.detailInfo.joinProjectUuid + '&isScanWorkCode=true'
					});
				});
		},
		closeEllipsisTip(e) {
			let content = e.target.dataset.content;
			if (!content) {
				//点击非省略组件，关闭
				this.$emit('closeellipsistip');
			}
		}
	},
	created: function () {},
	watch: {
		detailInfo: {
			handler: function (value) {
				if (value.loading) {
					this.loading = false;
				}
				value.identityOrgData = this.handleContent(value.identityOrg);
				value.addressData = this.handleContent(value.address);
				value.workTeamNameData = this.handleContent(value.workTeamName);
				value.nativePlaceData = this.handleContent(value.nativePlace);
				value.accountBankNameData = this.handleContent(value.accountBankName);
				value.accountBankNumberData = this.handleContent(value.accountBankNumber);
				// this.setData({
				// 	loading: this.loading,
				// 	handleDetailInfo: value,
				// 	isPullRefresh: value.isPullRefresh
				// });
				this.handleDetailInfo = value;
				this.isPullRefresh = value.isPullRefresh;
			},
			immediate: true,
			deep: true
		}
	}
};
</script>
<style scoped>
@import '../../../assets/style/common.css';

.basic-info-container {
	width: 100vw;
	height: 100%;
	background-color: #f6f7fa;
	display: flex;
	flex-direction: column;
}

.scroll-view {
	flex: 1;
	height: 0;
	display: flex;
	flex-direction: column;
}

.top-info-container {
	background-color: #fff;
	padding: 32rpx;
}

.person-info {
	display: flex;
	align-items: center;
}

.person-info .icon-container {
	width: 100rpx;
	height: 100rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.icon-container .avatar-container {
	width: 100rpx;
	height: 100rpx;
	border-radius: 12rpx;
	background-color: transparent;
}

.icon-container.green {
	background-color: #00c467;
}

.icon-container.orange {
	background-color: #ff9544;
}

.test-avatar {
	width: 96rpx;
	height: 96rpx;
	border-radius: 12rpx;
	border: 1rpx solid #c8d1ed;
}

.icon-container .black-icon {
	position: absolute;
	top: -24rpx;
	right: -12rpx;
}

.person-info .info-detail-container {
	margin-left: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.info-detail-container .info-detail-top {
	display: flex;
	align-items: center;
}

.info-detail-top .person-name {
	font-size: 34rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
	word-break: break-all;
	text-align: justify;
}

.info-detail-top .work-type {
	flex-shrink: 0;
	flex-wrap: wrap;
	max-width: 380rpx;
	background: #eff1f6;
	border-radius: 6rpx;
	padding: 4rpx 16rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #4b5680;
	margin-left: 16rpx;
	display: flex;
	align-items: center;
	margin-bottom: 4rpx;
	text-align: justify;
	word-break: break-all;
}

.info-detail-bottom {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
}

.attendance-info-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.attendance-item {
	width: 207rpx;
	height: 140rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	text-align: center;
	flex-direction: column;
	background: #f2f4f8;
	border-radius: 8rpx;
	padding: 18rpx;
	margin-top: 36rpx;
}

.attendance-item .item-num {
	height: 56rpx;
	font-size: 36rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 550;
	color: #3f64fa;
	word-break: break-all;
}

.attendance-item .item-label {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
}

.last-attendance-info {
	padding-top: 32rpx;
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
}

.last-attendance-info .last-attendance-label {
	width: 200rpx;
	color: #4b5680;
}

.last-attendance-info .last-attendance-content {
	flex: 1;
	text-align: right;
	color: #1e253f;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.last-attendance-content .right-arrow {
	flex-shrink: 0;
	width: 15rpx;
	height: 15rpx;
	border-top: 4rpx solid #949dbf;
	border-right: 4rpx solid #949dbf;
	transform: rotate(45deg);
	margin-left: 16rpx;
}

.title {
	padding: 16rpx 32rpx;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
}

.title .title-icon {
	margin-right: 12rpx;
	width: 36rpx;
	height: 36rpx;
}

.info-list {
	padding: 0 32rpx;
	background-color: #fff;
}

.info-list .info-item,
.info-list .vertical-item {
	border-bottom: 1rpx solid #e1e2e7;
	padding: 28rpx 0;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
}

.info-list .info-item {
	display: flex;
	align-items: center;
}

.info-list .info-item:last-child,
.info-list .vertical-item:last-child {
	border-bottom: 0;
}

.info-item .info-label,
.vertical-item .vertical-label {
	color: #4b5680;
	margin-right: 32rpx;
	flex-shrink: 0;
}

.info-item .info-content {
	margin-left: auto;
	flex: 1;
	color: #1e253f;
	text-align: right;
}

.ellipsis-content {
	margin-left: auto;
}

.info-item .right-arrow {
	flex-shrink: 0;
	width: 15rpx;
	height: 15rpx;
	border-top: 4rpx solid #949dbf;
	border-right: 4rpx solid #949dbf;
	transform: rotate(45deg);
	margin-left: auto;
}

.vertical-item .vertical-content {
	padding-top: 24rpx;
}

.vertical-content .pic-list {
	display: flex;
	align-items: center;
}

.pic-list .pic-container {
	width: 162rpx;
	height: 162rpx;
	margin-right: 24rpx;
	border-radius: 6rpx;
}

.pic-list .pic {
	width: 158rpx;
	height: 158rpx;
	border-radius: 6rpx;
	border: 1rpx solid #edeff7;
}

.certificate-list {
	background-color: #fff;
}

.certificate-list .certificate-item {
	padding: 24rpx 32rpx;
	border-bottom: 1px solid #e1e2e7;
}

.certificate-list .certificate-item:last-child {
	border-bottom: 0;
}

.certificate-item .certificate-title {
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
	display: flex;
	align-items: center;
}

.certificate-item .certificate-title::before {
	content: '';
	width: 6rpx;
	height: 28rpx;
	background: #3f64fa;
	border-radius: 3rpx;
	margin-right: 12rpx;
	position: relative;
	bottom: 2rpx;
}

.certificate-item .certificate-content {
	display: flex;
	align-items: center;
	padding-top: 32rpx;
}

.certificate-content .certificate-name {
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
}

.certificate-content .right-arrow {
	margin-left: auto;
	flex-shrink: 0;
	width: 15rpx;
	height: 15rpx;
	border-top: 4rpx solid #949dbf;
	border-right: 4rpx solid #949dbf;
	transform: rotate(45deg);
}

.block {
	padding: 16rpx;
}

.common-btn-container.red {
	background: #ff555c;
}

.tip-content {
	padding: 40rpx 48rpx 8rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
}

.tip-content .tip-item {
	display: flex;
	margin-bottom: 32rpx;
}

.tip-content .tip-item-label {
	flex-shrink: 0;
}

.tip-content .tip-item-content {
	flex: 1;
	text-align: justify;
}

.no-data {
	height: 100%;
	background-color: #fff;
	padding: 20rpx 0;
	box-sizing: border-box;
}

.reject-reason {
	background: #ffeeee;
	padding: 16rpx 32rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ff555c;
	word-break: break-all;
}

.textarea {
	border: 2rpx solid #949dbf;
	padding: 12px;
	border-radius: 8rpx;
	height: 80rpx;
}
</style>
